<template>
  <div class="cart-box">
    <sHeader :name="'购物车'" :noBack="true"></sHeader>
    <div class="cart-content">
      <div class="cart-header">
        <div class="cart-list" v-for="(item, index) in total" :key="index">
          <!-- 购物车列表 -->
          <div class="cart-item-wrap">
            <!-- 商品图片区域 -->
            <div class="cart-item-img">
              <van-checkbox v-model="checked"></van-checkbox>
              <img src="" alt="" />
            </div>
            <!-- 商品信息区域 -->
            <div class="cart-item-info">
              <div class="cart-item-name">
                <span class="item-name">商品名称</span>
                <span class="item-total">*1</span>
              </div>
              <div class="cart-item-price">
                <p class="item-price">￥131333</p>
                <van-stepper v-model="value" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
      <!-- <div class="cart-footer"></div> -->
    </div>
    <navbar></navbar>
  </div>
</template>
<script lang="ts" setup>
import navbar from "@/components/navbar.vue";
import sHeader from "@/components/SimpleHeader.vue";
import { ref } from "vue";
import { showToast } from "vant";

const total = ref([
  {
    id: 1,
    name: "商品名称",
  },
  {
    id: 2,
    name: "商品名称",
  },
  {
    id: 3,
    name: "商品名称",
  },
  {
    id: 3,
    name: "商品名称",
  },
  {
    id: 3,
    name: "商品名称",
  },
  {
    id: 3,
    name: "商品名称",
  },
  {
    id: 3,
    name: "商品名称",
  },
]);
const checked = ref("1");
const value = ref(1);
const allChecked = ref(false);

const onSubmit = () => showToast("点击按钮");
</script>
<style lang="less">
@import "../common/style/mixin";
.cart-box {
  /* 添加外层高度控制 */
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .cart-content {
    flex: 1; // 占据剩余空间
    overflow-y: auto; // 允许垂直滚动
    position: relative; // 相对定位，以便子元素绝对定位
    padding-bottom: 64px; /* 预留结算按钮高度 */
    .cart-header {
      padding: 10px;

      .cart-list {
        .cart-item-wrap {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          .cart-item-img {
            display: flex;
            align-items: center;
            justify-content: center;
            .van-checkbox__icon {
              width: 20px;
              height: 20px;
            }
            .van-checkbox {
              margin-right: 10px;
            }
            img {
              width: 80px;
              height: 80px;
            }
          }
          .cart-item-info {
            width: 100%;
            padding-left: 20px;
            .cart-item-name {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;
              .item-name {
                font-size: 16px;
                color: #333;
              }
              .item-total {
                color: #999;
                font-size: 14px;
              }
            }
            .cart-item-price {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .item-price {
                font-size: 16px;
                color: red;
              }
            }
          }
        }
      }
    }

    .van-submit-bar {
      position: fixed; /* 改为粘性定位 */
      bottom: 64px; /* 在navbar上方 */
      background: white; /* 添加背景避免穿透 */
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 顶部阴影分隔 */
      z-index: 1001; /* 确保在内容上方 */
      width: 100%;
      .van-checkbox {
        margin-left: 10px;
      }
      .van-submit-bar__text {
        margin-right: 10px;
      }
      .van-submit-bar__button {
        background: @primary;
      }
    }
  }
}
</style>
